<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<!--
    组件系统是 Vue 的另一个重要概念，
    因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用
-->

<div id="app">

    <ul>
        <diy-el></diy-el>
        <diy-el></diy-el>
        <diy-el></diy-el>
        <diy-el></diy-el>
    </ul>

    <diy-el2></diy-el2>

</div>

<script type="text/javascript">
    /* 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单： */
    Vue.component("diy-el", {
       template : "<li> 一个自定义的Vue组件 </li>"
    });

    /* 可以用它构建另一个组件模板： */
    Vue.component("diy-el2", {
        template:
            "<ol>\n" +
            "  <!-- 创建一个 todo-item 组件的实例 -->\n" +
            "  <diy-el></diy-el>\n" +
            "</ol>"
    })


    let vm = new Vue({
        el : "#app",
        data : {
            context : "Hello Vue!!!"
        }
    })
</script>

</body>
</html>